<template>
  <div>

    <div class="index-wrap">
      <div class="index-left">
        <div class="index-left-block" style="background-color: #ffffff">
          <div class="artwork-category-panel__category-title">
            作品类别
          </div>

          <span class="allSpan">
                            <a @click="selectAllWorks()" style="cursor: pointer;color:#222222;text-decoration: none">
                        全部</a></span>
          <span class="categoryName" v-for="category in categories">
                        <el-divider direction="vertical"></el-divider>
                    <a @click="selectWorkCategories(category)"
                       style="cursor: pointer;color:#222222;text-decoration: none">{{ category.categoryName }}</a>
                </span>
          <el-divider></el-divider>
          <div v-for="category in categories">
            <div class="workTitle">
              {{ category.categoryName }}
              <br/><br/>
            </div>
            <span v-for="category2 in category.categories">
                        <el-tag @click="selectWorkCategories(category2)"
                                class="workItem">{{ category2.categoryName }}</el-tag>
                    </span>
            <el-divider></el-divider>
          </div>

        </div>
      </div>
    </div>

    <div>
      <el-row class="swiper-painter-item">
        <el-card class="swiper-painter-cards" v-for="(workInfo,workId) in newWorksInfo" :key="workId">
          <button class="work-button" style="border: #ffffff">
            <div v-if="workInfo.workFileType === 1" @click="workDetail(workInfo)">
              <img class="image" :src="imgUrl+workInfo.workFilename"/>
            </div>
            <div v-else @click="workDetail(workInfo)">
              <video :poster="workInfo.poster" :controls="true" class="video_fo" :src="imgUrl+workInfo.workFilename"></video>
            </div>
            <div class="work-div">
                            <span class="painter-item-name">
                                {{ workInfo.workName }}
                            </span>
            </div>
            <div class="introduction-motto">
                                    <span class="author-span">
                                        <img class="work-user-img" :src="imgUrl+workInfo.userImg">
                                        <span class="author-span">
                                            {{ workInfo.username }}
                                        </span>

                                    </span>
              <span class="star-span">
                                    <i class="icon-favorites"></i>
                                    {{ workInfo.workLikesNums }}
                                    </span>
            </div>
          </button>

        </el-card>

      </el-row>
    </div>

  </div>
</template>

<script setup>
import {
  selectNewWorks
} from "@/assets/api/workInfoApi";
import {selectCategories} from "@/assets/api/categoryApi";
import {useRouter} from 'vue-router';
import {getCurrentInstance, onBeforeMount, ref} from "vue";


const newWorksInfo = ref([]);
const centerDialogVisible = false;
const workImg = '';
const workInfo = ref({});
const comments = ref([]);
const comment = '';
const categories = ref([]);
const router = useRouter();
const data = ref({});
const imgUrl = getCurrentInstance()?.appContext.config.globalProperties.$imgUrl



const selectNewWorksInfo = () => {
  selectNewWorks(data).then((res) => {
    newWorksInfo.value = res.data.data;
  })
};
const selectAllWorks = () => {
  router.push('/newWork');
};
const workDetail = (work) => {
  router.push({path: '/workDetail', query: {id: work.workId}});
};

const showCategories = () => {
  selectCategories(data).then((res) => {
    categories.value = res.data;
  })
};
const selectWorkCategories = (category) => {
  router.push({path: '/newWorkCategory', query: {type: 'work_date', id: category.categoryId}});
};

onBeforeMount(() => {
  selectNewWorksInfo();
  showCategories();
});
</script>

<style scoped>
@import "../../assets/fonts/iconfont.css";

.video_fo {
  position: relative;
  width: 283px;
  height: 200px;
  left: -20px;
}

.index-wrap {
  width: 1200px;
  margin: 0 auto;
}

.index-left {
  float: left;
  text-align: left;
  font-size: 14px;
  color: #4a4a4a;
  margin-bottom: 15px;
}

.index-left-block {
  margin: 15px;
  width: 300px;
  box-shadow: 0 0 1px #ddd;
}

.workTitle {
  font-size: 12px;
  color: #9b9b9b;
  margin-left: 10px;
}

.artwork-category-panel__category-title {
  font-size: 14px;
  color: #4a4a4a;
  margin-bottom: 15px;
  font-weight: 700;
  margin-top: 10px;
}

.workItem {
  color: #222222;
  padding: 0px 10px;
  font-size: 12px;
  border: 1px solid #adb3fb;
  border-radius: 40px;
  margin: 5px 5px 5px 5px;
  transition: .5s;
  cursor: pointer;
}

.categoryName {
  font-size: 14px;
}

.allSpan {
  margin-left: 10px;
}

.swiper-painter-item {
  margin-left: 180px;
  overflow: hidden;
  padding: 0 12px;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
}

.swiper-painter-cards {
  margin-top: 15px;
  height: 400px;
  margin-left: 10px;
  width: 300px;
}

.painter-item-name {
  max-width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  align-items: center;
  font-size: 14px;
  color: #333;
}

.introduction-motto {
  background-color: #ffffff;
  margin-top: 8px;
  font-size: 14px;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: justify;
  text-justify: inter-ideograph;
}

.image {
  width: 100%;
  height: 250px;
  display: block;
  margin: 0 auto
}

p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.star-span {
  color: #adb3fb;
  float: right;
  margin-right: 20px;
  background-color: #ffffff;
  margin-top: 20px;
}

.author-span {
  color: #777;
  font-size: 14px;
  max-width: 154px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background-color: #ffffff;
}

.work-user-img {
  width: 55px;
  height: 55px;
  border-radius: 100%;
}

.work-div {
  background-color: #ffffff;
  margin-top: 20px;
}

.work-button {
  background-color: #ffffff;
  border: #fff;
  text-align: center;
}

.panel img {
  width: 300px;
  height: 400px;
  padding: 70px;
}

.modal-author__author-operator button {
  margin-left: 15px;
  width: 94px;
  height: 30px;
  padding: 4px 15px;
  border-radius: 20px;
  border: 1px solid transparent;
}

a {
  text-decoration: none;
}
</style>

